//获取信息并渲染到页面
function renderStudent() {
    $.ajax({
        url: 'http://www.itcbc.com:3006/api/student/list',
        success: function (res) {
            // console.log(res);
            //渲染
            let str = ''
            //遍历
            res.data.forEach(element => {
                str += `<tr>
                <td>${element.id}</td>
                <td>${element.username}</td>
                <td>${element.sex}</td>
                <td>${element.year}</td>
                <td><img src="http://www.itcbc.com:3006/${element.user_pic}" alt=""></td>
                <td class="td">
                    <button id="btn1" data-id='${element.id}'data-username="${element.username}" data-sex="${element.sex}"data-year="${element.year}"data-user_pic="${element.user_pic}"class="layui-btn layui-btn-radius layui-btn-normal">编辑</button>
                    <button id="btn" data-id='${element.id}' class="layui-btn layui-btn-radius layui-btn-danger">删除</button>
                    <a href="http://www.itcbc.com:3006/api/student/download?id=${element.id}" class="layui-btn layui-btn-radius">档案下载</a>
                </td>
              </tr>`
            });
            //
            $('tbody').html(str)
        }
    })
}
renderStudent()


// ========================添加学员=====================
let layer = layui.layer
let form = layui.form
let str_data = {}
let adc
//进度条
let element = layui.element
// 点击 录入学员 出现弹层
$('button:contains("录入学员")').on('click', function () {
    adc = layer.open({
        type: 1,
        // skin: 'layui-layer-rim', //加上边框
        area: ['600px', '350px'], //宽高
        title: '新学员录入',
        content: $('#tpl-add').html(),//获取html内容当做弹窗内容
        success: function () {
            //弹层成功后的回调
            form.render()//目的时更新单选按钮，否则点击不了

            // laydata.render({
            //     elem:'#birthday'
            // })
            //测试进度
            element.progress('demo', '0%')
            //
            $('.add-btn').show().next().hide()
        }
    });
})
//单击test1触发file单击
$('body').on('click', '#test1', function () {
    $('#file').trigger('click')
})
///图片预览
$('body').on('change', '#file', function () {
    //选取文件列表
    let files = this.files
    //判断 d
    if (files.length > 0) {
        let url = URL.createObjectURL(files[0])
        $('.preview img').attr('src', url)
    }
})
//完成添加
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault()
    //收集表单数据必须检查
    let fd = new FormData(this)
    //判断时修改还是添加
    let type
    let url = 'http://www.itcbc.com:3006/api/student'
    if ($('.edit-btn').is(':visible')){
        type = 'PUT',
        url = url + '/update',
        fd.append('id',str_data.id)
    } else if ($('.add-btn').is(':visible')) {
        type = 'POST'
        url = url + '/add'
    }
    
    $.ajax({
        type: type,
        url: url,
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                renderStudent()
                layer.close(adc)
            }
        },
        //xhr选项，允许用户在这里补充额外的原生代码
        //函数中，必须返回xhr对象
        xhr: function () {
            let xhr = new XMLHttpRequest();
            xhr.upload.onprogress = function (e) {
                let bai = parseInt((e.loaded / e.total * 100) + '%')
                //toFixed(0) 括号里保留几位小数就写几
                // let bai = ((e.loaded / e.total * 100).toFixed(0) + '%')
                element.progress('demo', bai)
            }
            //返回xhr
            return xhr
        }
    })
})
//删除
$('tbody').on('click', '#btn', function () {
    let x = confirm('你确定要删除吗')
    if (x === false) return
    let id = $(this).data('id')
    // console.log(id);
    $.ajax({
        type: 'DELETE',
        url: `http://www.itcbc.com:3006/api/student/delete?id=${id}`,
        // url: `http://www.itcbc.com:3006/api/student/delete`,data:{id:id},

        success: function (res) {
            if (res.status == 0) {
                layer.msg(res.message)
                renderStudent()
            } else {
                alert('文件已被删除')
            }
        }
    })
})



//更新
$('tbody').on('click', '#btn1', function () {
    //获取事件员的五个自定义属性
    let data = $(this).data()
    str_data.id = data.id
    data.user_pic = $(this).data('user_pic')
    //弹窗
    adc = layer.open({
        type: 1,
        // skin: 'layui-layer-rim', //加上边框
        area: ['600px', '350px'], //宽高
        title: '编辑学员',
        content: $('#tpl-add').html(),//获取html内容当做弹窗内容
        success: function () {
            //显示确认按钮
            $('.edit-btn').show().prev().hide()
            //弹层成功后的回调
            form.render()//目的时更新单选按钮，否则点击不了
            // laydata.render({
            //     elem:'#birthday'
            // })
            //测试进度
            element.progress('demo', '0%')
            //弹层出现后，单选按钮选然后数据回填
            //单独回填图片
            $('.preview img').attr('src', 'http://www.itcbc.com:3006/' + data.user_pic)
            delete data.user_pic
            form.val("abc", data)
        }
    })
})
